<script setup>
import { ref } from 'vue';
import SonCom from './components/SonCom.vue';

const msg = ref('来自父组件的数据')

const onMsgChange = (event)=>{
msg.value=event
}

</script>
<template>
<!-- 结构 -->
<div class="box">
  <h1>父组件</h1>
  <!-- <SonCom :msg="msg" /> -->
   {{ msg }}
  <button @click="msg+='!'">修改数据</button>
    <SonCom :msg="msg" @update:msg="msg=$event" />
      <SonCom :msg="msg" @update:msg="onMsgChange" />

      <!-- Vue2 属性双向绑定 写法 -->
    <!-- <SonCom :msg.sync="msg" /> -->
      <!-- Vue3的写法 -->
       <SonCom v-model:msg="msg"></SonCom>
</div>

</template>

<style>
/* 样式 */
.box{
  padding: 20px;
  border: 5px solid red;
}
</style>
